﻿<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
    <link href="/static/backstage/static/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css"/>
    <link href="/static/backstage/static/h-ui.admin/css/H-ui.login.css" rel="stylesheet" type="text/css"/>
    <link href="/static/backstage/static/h-ui.admin/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="/static/backstage/lib/Hui-iconfont/1.0.8/iconfont.css" rel="stylesheet" type="text/css"/>
    <link href="/static/backstage/lib/layer/2.4/skin/layer.css">
    <!--[if IE 6]>
<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script><![endif]-->
    <title>后台登录 - H-ui.admin.page v3.0</title>
    <meta name="keywords" content="caesar后台博客">
    <meta name="description" content="caesar后台博客">
</head>
<body>
<input type="hidden" id="TenantId" name="TenantId" value=""/>
<div class="header"></div>
<div class="loginWraper">
    <div id="loginform" class="loginBox">
        <form class="form form-horizontal" method="post">
            {% csrf_token %}
            <input type="hidden" name="geetest_challenge">
            <input type="hidden" name="geetest_validate">
            <input type="hidden" name="geetest_seccode">
            <div class="row cl">
                <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60d;</i></label>
                <div class="formControls col-xs-8">
                    <input id="account" name="account" type="text" placeholder="账户" class="input-text size-L">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60e;</i></label>
                <div class="formControls col-xs-8">
                    <input id="pwd" name="pwd" type="password" placeholder="密码" class="input-text size-L">
                </div>
            </div>
            <div class="row cl">
                <div class="formControls col-xs-8 col-xs-offset-3">
                    <div id="popup-captcha"></div>
                </div>
            </div>
            <div class="row cl">
                <div class="formControls col-xs-8 col-xs-offset-3">
                    <label for="online">
                        <input type="checkbox" name="online" id="online" value="">
                        使我保持登录状态</label>
                </div>
            </div>
            <div class="row cl">
                <div class="formControls col-xs-8 col-xs-offset-3">
                    <input name="" type="submit" class="btn btn-success radius size-L"
                           value="&nbsp;登&nbsp;&nbsp;&nbsp;&nbsp;录&nbsp;">
                    <input name="" type="reset" class="btn btn-default radius size-L"
                           value="&nbsp;取&nbsp;&nbsp;&nbsp;&nbsp;消&nbsp;">
                </div>
            </div>
            <div class="row cl">
                <div class="formControls col-xs-8 col-xs-offset-3" style="color: red">
                    {{ error }}
                </div>
            </div>
        </form>
    </div>
</div>
<div class="footer">Copyright 你的公司名称 by H-ui.admin.page.v3.0</div>

<script type="text/javascript" src="/static/backstage/lib/jquery/1.9.1/jquery.min.js"></script>
{#<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>#}
<script type="text/javascript" src="/static/backstage/static/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="/static/backstage/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/static/backstage/gt.js"></script>

<script>
    var handlerPopup = function (captchaObj) {
         var validate = '';
        // 将验证码加到id为captcha的元素里
        captchaObj.appendTo("#popup-captcha");
        // 成功的回调
        captchaObj.onSuccess(function () {
            validate = captchaObj.getValidate();
            // 将极验数据放入隐藏的input中
            $('input[name="geetest_challenge"]').val(validate.geetest_challenge);
            $('input[name="geetest_validate"]').val(validate.geetest_validate);
            $('input[name="geetest_seccode"]').val(validate.geetest_seccode);
            /*$.ajax({
                url: "/manager/login/", // 进行二次验证
                type: "post",
                dataType: "json",
                data: {
                    account: $('#account').val(),
                    pwd: $('#pwd').val(),
                    geetest_challenge: validate.geetest_challenge,
                    geetest_validate: validate.geetest_validate,
                    geetest_seccode: validate.geetest_seccode
                },
                success: function (data) {
                    if (data && (data.status === "success")) {
                        $(document.body).html('<h1>登录成功</h1>');
                    } else {
                        $(document.body).html('<h1>登录失败</h1>');
                    }
                }
            });*/
        });
        /*$("#popup-submit").click(function () {
            captchaObj.show();
        });*/

        // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
    };
    $("#popup-submit").click(function () {
            var account = $('#account').val();
            if(!account){
                layer.msg('请输入用户名！',{icon:5,time:2000},function () {
                     // 光标聚焦到当前输入框
                    $('#account').focus()
                });
                return false;
            }
            var pwd = $('#pwd').val();
            if(!pwd){
                layer.msg('请输入密码！',{icon:5,time:2000},function () {
                    // 光标聚焦到当前输入框
                    $('#pwd').focus()
                });
                return false;
            }
            if(!validate){
                layer.msg('请完成验证！',{icon:5,time:2000});
                return false;
            }
        });
    // 验证开始需要向网站主后台获取id，challenge，success（是否启用failback）
    $.ajax({
        url: "/pcgetcaptcha/?t=" + (new Date()).getTime(), // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {
            // 使用initGeetest接口
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                product: "popup", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
                offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
               // ,new_captcha:data.new_captcha,
               // api_server:"api.geetest.com"
                // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
            }, handlerPopup);
        }
    });

</script>




<!--<script>
    $("#kanbuq").click(function () {
        /*
        按钮在验证码标签的下方，我们设置的点击事件是在看不清按钮上的
        这里的this代表的是看不清按钮
        通过按钮找寻它的兄弟节点的上一个中的src属性
        prev方法      查找当前标签的同级标签的上一个标签
        attr        标签的属性
         */
        var verify_url = $(this).prev('img').attr('src');
        // 我们每次生成的图片的url都是以?分割的，通过查找?来确定我们是否为首次登陆
        var end_position = verify_url.indexOf('?');
        if (end_position != -1) {
            verify_url = verify_url.substring(0, verify_url.indexOf('?'))
        }
        /*
        通过实例化Date对象，并对对象中的值进行筛选
        getTime     获取到时分秒毫秒数
         */
        var mstime = (new Date()).getTime();
        console.log(mstime);
        $(this).prev('img').attr('src', verify_url + '?' + mstime)
    })
</script>-->
</body>
</html>